<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title></title>

		<!-- 引入  vue -->
		<script src="../js/vue.js"></script>
		<!-- 引入 element-ul 样式 -->
		<link rel="stylesheet" href="../plugin/element/index.css">
		<!-- 引入全局样式 -->
		<link rel="stylesheet" href="../css/global.css" />
		<!-- 引入 element-ul js -->
		<script src="../plugin/element/index.js"></script>

		<style type="text/css">
			.el-menu {
				height: 100%;
				border: none;
			}

			.el-submenu__title:hover {
				background: #F8F8FF;
			}

			.el-menu-item:focus,
			.el-menu-item:hover {
				background: #F8F8FF;
				color: #6462F3;
			}

			.nav-wrapper {
				position: fixed;
				top: 82px;
				bottom: 0;
				width: 257px;
				background: #FFFFFF;
				z-index: 100;
			}

			.el-submenu .el-menu-item {
				padding-left: 51px !important;
			}
			.el-menu-item a {
				color: #303133;
			}
			.el-menu-item:focus, .el-menu-item:hover a {
				color: #6462F3;
			}
		</style>
	</head>

	<body>
		<div class="nav-wrapper" v-cloak>
			<el-menu class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">

				<el-menu-item index="1">
					<i class="el-icon-setting"></i>
					<span slot="title">总览</span>
				</el-menu-item>

				<el-submenu index="2">
					<template slot="title">
						<i class="el-icon-location"></i>
						<span>产品管理</span>
					</template>
					<el-menu-item index="2-1">云服务器CVM</el-menu-item>
					<el-menu-item index="2-2">轻量应用云服务器</el-menu-item>
					<el-menu-item index="2-3">计算型云服务器</el-menu-item>
					<el-menu-item index="2-4">内存型云服务器</el-menu-item>
				</el-submenu>

				<el-submenu index="3">
					<template slot="title">
						<i class="el-icon-location"></i>
						<span>续费管理</span>
					</template>

				</el-submenu>


				<el-submenu index="4">
					<template slot="title">
						<i class="el-icon-location"></i>
						<span>订单中心</span>
					</template>

				</el-submenu>

				<el-submenu index="5">
					<template slot="title">
						<i class="iconfont">&#xe641;</i>
						<span>我的钱包</span>
					</template>

				</el-submenu>

				<el-submenu index="6">
					<template slot="title">
						<i class="el-icon-location"></i>
						<span>我的工单</span>
					</template>

				</el-submenu>


				<el-submenu index="7">
					<template slot="title">
						<i class="el-icon-location"></i>
						<span>账号设置</span>
					</template>

				</el-submenu>

				<el-submenu index="8">
					<template slot="title">
						<i class="el-icon-location"></i>
						<span>专属客服</span>
					</template>

				</el-submenu>
				
				
				<el-submenu index="9">
					<template slot="title">
						<i class="el-icon-location"></i>
						<span>我的消息</span>
					</template>
					<a href="../message/index.html?type=all"><el-menu-item index="9-1">全部消息</el-menu-item></a>
					<a href="../message/index.html?type=noread"><el-menu-item index="9-2">未读消息</el-menu-item></a>
					<a href="../message/index.html?type=alreadyRead"><el-menu-item index="9-3">已读消息</el-menu-item></a>
				</el-submenu>



			</el-menu>


		</div>


		<!-- vue  -->
		<script>
			let vmNav = new Vue({
				el: '.nav-wrapper',
				data: function() {
					return {

					}
				},
				methods: {
					handleOpen: function(key, keyPath) {
						console.log(key, keyPath);
					},
					handleClose: function(key, keyPath) {
						console.log(key, keyPath);
					}
				},
				mounted: function() {

				}

			})
		</script>
	</body>
</html>
